<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
    class="page-nav-bar"
    :title="userInfo.name"
    left-arrow @click-left="$router.back()" />
    <!-- /导航栏 -->
    <!-- 点击头像 -->
    <input type="file" ref="photo" @change="updateImg" hidden>
    <van-cell title="头像" is-link @click="$refs.photo.click()">
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="userInfo.photo"
      />
    </van-cell>
    <van-cell title="昵称" :value="userInfo.name" is-link @click="isNameEdit=true"/>
    <van-cell title="性别" :value="userInfo.gender===0?'男':'女'" is-link  @click="isGenderEdit=true"/>
    <van-cell title="生日" :value="userInfo.birthday" is-link @click="isBirthdayEdit=true"/>
    <!-- 编辑昵称 -->
    <van-popup v-model="isNameEdit" position="bottom" :style="{ height: '100%' }" >
      <edit-name @colse="isNameEdit=false" v-if="isNameEdit" v-model="userInfo.name"></edit-name>
    </van-popup>
     <!-- 编辑昵称 -->
     <!-- 编辑性别 -->
    <van-popup v-model="isGenderEdit" position="bottom" >
      <edit-gender @colse="isGenderEdit=false" v-if="isGenderEdit" v-model="userInfo.gender"></edit-gender>
    </van-popup>
     <!-- 编辑性别 -->
     <!-- 编辑生日 -->
    <van-popup v-model="isBirthdayEdit" position="bottom" >
      <edit-birthday @colse="isBirthdayEdit=false" v-if="isBirthdayEdit" v-model="userInfo.birthday"></edit-birthday>
    </van-popup>
     <!-- 编辑生日 -->
     <!-- 编辑头像层 -->
     <van-popup v-model="isPhotoEdit" position="bottom" :style="{ height: '100%' }">
      <edit-photo :img="img" @close="isPhotoEdit=false" @upPhoto="userInfo.photo=$event" v-model="isPhotoEdit"></edit-photo>
     </van-popup>
  </div>
</template>

<script>
import { getProfile } from '@/api/user'
import editName from '@/views/info/commont/edit-name'
import editGender from '@/views/info/commont/edit-gender'
import editBirthday from '@/views/info/commont/edit-birthday'
import editPhoto from '@/views/info/commont/edit-photo'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {},
      isNameEdit: false,
      isGenderEdit: false,
      isBirthdayEdit: false,
      isPhotoEdit: false,
      img: ''
    }
  },
  components: {
    editName,
    editGender,
    editBirthday,
    editPhoto
  },

  computed: {
  },
  created () {
    this.loadUser()
  },
  methods: {
    async loadUser () {
      try {
        const { data } = await getProfile()
        this.userInfo = data.data
        console.log(data)
      } catch (err) {
        console.log('请求失败')
      }
    },
    updateImg () {
      // 1.获取dom file元素节点
      const file = this.$refs.photo.files[0]
      // 2.得到file文件的本地路径
      this.img = window.URL.createObjectURL(file)
      // 3. 打开弹层
      this.isPhotoEdit = true
      // 4.清空内容
      this.$refs.photo.value = ''
    }

  }
}
</script>

<style scoped lang='less'>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
/deep/.van-icon-arrow-left{
  color: white;
}
</style>
